<template>
    <div>
        <titleNav></titleNav>
        <img src="../../assets/productImg/product_img.jpg" class="banner-img">
        <div class="main">
            <header>
                <p>产品案例</p>
                <p>Product Case</p>
            </header>
            <div class="product">
                <div v-for="(v,i) of listTop" :key="i+100" class="productIn" @click="toDetail(v.id)">
                    <div style="width: 575px;height: 367px;overflow: hidden">
                        <img :src="`http://www.shangyuninfo.com/api/profile/product/${v.backgroundRotaryBroadcasting}`"
                             alt="" class="animate">
                    </div>
                    <p class="title">{{v.name}}</p>
                    <p class="textForPruduct">{{v.descri}}</p>
                </div>
            </div>
            <div class="header2">
                <p>项目案例</p>
                <p>Project Case</p>
            </div>
            <div class="smallProduct">
                <div class="smallProductIn" v-for="(v,i) of listBottom" :key="i" @click="toDetail(v.id)">
                    <div  style="width: 277px;height: 176px;overflow: hidden">
                        <img :src="'http://www.shangyuninfo.com/api/profile/product/'+v.route" alt=""  class="animate">
                    </div>
                    <div class="shadow">
                        <p class="title">{{v.name}}</p>
                        <p class="text">{{v.descri}}</p>
                    </div>
                </div>
            </div>
        </div>
        <footerBox></footerBox>
    </div>
</template>

<script>
    import footerBox from "../../components/footerBox";
    import titleNav from "../../components/titleNav";
    import {getProductListAll} from "../../api";

    export default {
        name: "productPage",
        data() {
            return {
                listTop: [],
                listBottom: []
            }
        },
        created() {
            this.$store.commit('changePage', 2)
            getProductListAll().then(res => {
                console.log(res.data.rows)
                res.data.rows.forEach(v => {
                    if (v.route && v.productSort == 0) {
                        this.listTop.push(v)
                    }
                    if ((v.route != null) && v.productSort == 1 && v.descri !== '') {
                        this.listBottom.push(v)
                    }
                })
                // console.log(this.listTop)
                console.log(this.listBottom)
            })
        },
        components: {
            footerBox,
            titleNav,
        },
        methods:{
            toDetail(to) {
                this.$router.push({
                    path:'/detailsForNews',
                    query:{
                        id:to,
                        select:'产品详情',
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .banner-img {
        width: 100%;
    }

    .main {
        width: 1200px;
        margin: auto;
        /*//header相关*/ //
        header,
        .header2 {
            width: 970px;
            margin: 30px auto;
            /*text-align: center;*/

            p {
                text-align: center;
                font-size: 22px;
                font-weight: 500;
                line-height: 1.1;
                color: inherit;
                margin-bottom: 10px;
            }
        }
    }

    //大图
    .product {
        overflow: hidden;
    }

    .productIn {
        width: 575px;
        padding: 0px 10px;
        float: left;
        cursor: pointer;
        img {
            width: 100%;
            height: 367px;
        }

        .title {
            margin-top: 10px;
            font-weight: 700;
            font-family: "Adobe 黑体 Std R"
        }

        .textForPruduct {
            margin-top: 20px;
            font-size: 16px;
            letter-spacing: 1px;
            line-height: 28px;
            text-align: left;
            color: #888889;
            height: 84px;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    }

    .smallProduct {
        overflow: hidden;
    }
    .shadow {
        float: right;
        width: 99.8%;
        margin-left: 0.1%;
    }
    .smallProductIn:hover .shadow {
        box-shadow:  0px 0px 5px #dcdcdc;
    }
    .smallProductIn {
        float: left;
        width: 277px;
        padding: 0px 10px;
        margin-bottom: 20px;
        cursor: pointer;
        img {
            width: 100%;
            height: 176px;
        }
        .title {
            font-size:16px;
            font-weight: 700;
            text-decoration-color: rgb(0, 0, 0);
            text-decoration-style: solid;
            text-decoration-thickness: auto;
            margin: 10px;
        }
        .text {
            font-size: 13px;
            line-height: 20px;
            padding: 0 10px;
            color: #666;
            letter-spacing: 1px;
            text-align: left;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 3;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            margin: 10px 0;
        }
    }

    //新加的动画效果
    .animate {
        transition: transform 1s ease;
    }
    .animate:hover {
        transform: scale(1.1,1.1);
    }

</style>